<template>
  <div>
    <div class="map-search">
      <input
        type="text"
        placeholder="请输入小区名称"
        v-model="keyword"
        @keypress.enter="txtKeyword_KeyPress_Enter()"
      />
      <button @click="search()"></button>
      <div class="map-search-window" v-show="mapSearchWindowVisible">
        <header class="map-window-header">
          <span>搜索结果</span>
          <img class="close-window" src="images/close_icon.png" @click="closeSearchWindow()" />
        </header>
        <ul class="search-result scrollbar-style">
          <li @click="villageDetailsShow(item.id, true)" v-for="item in villageList" :key="item.id">
            <div class="search-result-message">
              <p class="result-message-title">
                <span class="result-title-index">1</span>
                <span>{{item.name}}</span>
              </p>
              <p class="result-message-addr">{{item.address}}</p>
            </div>
            <div class="search-result-img">
              <img v-if="!item.noImg" :src="item.imgUrl" />
              <img v-if="item.noImg" src="images/noImg2.png" />
            </div>
          </li>
        </ul>
      </div>
    </div>
    <div class="map-option">
      <span @click="mapRefresh()">
        <img src="images/re_icon.png" />
      </span>
      <span @click="mapZoomIn()">
        <img src="images/scale_icon.png" />
      </span>
      <span @click="mapZoomOut()">
        <img src="images/dec_icon.png" />
      </span>
    </div>
    <div id="map-popup-window" class="map-window" v-show="popupWindowVisible">
      <header class="map-window-header" v-show="villageInfoVisible">
        <span>{{village.name}}</span>
        <img class="close-window" src="images/close_icon.png" @click="closePopupWindow()" />
      </header>
      <header class="map-window-header" v-show="!villageInfoVisible">
        <span>{{device.name}}</span>
        <img class="close-window" src="images/close_icon.png" @click="closePopupWindow()" />
      </header>
      <div v-show="villageInfoVisible">
        <div class="map-photo">
          <img v-if="!village.noImg" :src="village.imgUrl" />
          <img v-if="village.noImg" src="images/noImg1.png" />
        </div>
        <div class="map-window-content">
          <div class="map-tabs clearfix">
            <span id="jcxx" @click="jcxxTab()" :class="{ 'tabs-click': jcxxTabVisible }">基础信息</span>
            <span id="sbzt" @click="sbztTab()" :class="{ 'tabs-click': sbztTabVisible }">设备运行状态</span>
          </div>
          <div class="jcxx-tabs window-tabs" v-show="jcxxTabVisible" style="max-width:290px;">
            <p class="jcxx-tabs-text">
              <span>区域年份：</span>
              <span>{{village.ssqy}} {{village.jsnf}}</span>
            </p>
            <p class="jcxx-tabs-text">
              <span>标准地址：</span>
              <span>{{village.address}}</span>
            </p>
            <p class="jcxx-tabs-text">
              <span>占地面积：</span>
              <span>{{village.zdmj}}</span>
            </p>
            <p class="jcxx-tabs-text">
              <span>建设厂家：</span>
              <span>{{village.jscj}}</span>
            </p>
            <p class="jcxx-tabs-text">
              <span>建设厂家负责人：</span>
              <span>{{village.fzr}}</span>
            </p>
            <p class="jcxx-tabs-text">
              <span>建设厂家联系电话：</span>
              <span>{{village.lxdh}}</span>
            </p>
            <p class="jcxx-tabs-text">
              <span>警员姓名：</span>
              <span>{{village.jyxm}}</span>
            </p>
            <p class="jcxx-tabs-text">
              <span>警员联系方式：</span>
              <span>{{village.jylxfs}}</span>
            </p>
          </div>
          <div class="sbzt-tabs window-tabs scrollbar-style" v-show="sbztTabVisible">
            <table class="sbzt-table" cellpadding="0" cellspacing="0">
              <tr>
                <th>设备</th>
                <th>运行状态</th>
              </tr>
              <tr v-for="item in deviceList" :key="item.id">
                <td style="max-width:190px;">{{item.name}}</td>
                <td v-if="item.state==0">
                  <span class="zc-point"></span>正常
                </td>
                <td v-if="item.state==1">
                  <span class="yc-point"></span>异常
                </td>
              </tr>
              <tr v-if="deviceList.length==0">
                <td style="text-align: center;" colspan="2">没有数据</td>
              </tr>
              <tr v-if="deviceList.length>0">
                <td style="max-width:190px;">维也纳森林花园18栋东门车辆道闸</td>
                <td>
                  <span class="yc-point"></span>异常
                </td>
              </tr>
              <tr v-if="deviceList.length>0">
                <td style="max-width:190px;">维也纳森林花园18栋东门车辆道闸</td>
                <td>
                  <span class="zc-point"></span>正常
                </td>
              </tr>
              <tr v-if="deviceList.length>0">
                <td style="max-width:190px;">芙蓉路维也纳森林花园18栋东门车辆道闸</td>
                <td>
                  <span class="yc-point"></span>异常
                </td>
              </tr>
            </table>
          </div>
        </div>
      </div>
      <div v-show="!villageInfoVisible">
        <div style="line-height:30px; margin-top:10px; max-width:360px; margin-right:30px;">
          <p style="font-size:18px;">
            <span
              style="font-family:'PingFangSC-Regular', 'PingFang SC', sans-serif;color:#FFFFFF;"
            >设备类型：{{device.typeName}}</span>
          </p>
          <p style="font-size:18px;">
            <span
              style="font-family:'PingFangSC-Regular', 'PingFang SC', sans-serif;color:#FFFFFF;"
            >设备编码：{{device.code}}</span>
          </p>
          <p style="font-size:18px;">
            <span
              style="font-family:'PingFangSC-Regular', 'PingFang SC', sans-serif;color:#FFFFFF;"
            >运行状态：</span>
            <span
              v-if="device.state==0"
              style="font-family:'Helvetica', sans-serif;color:#00D91B; margin-right:5px;"
            >●</span>
            <span
              v-if="device.state==1"
              style="font-family:'Helvetica', sans-serif;color:#D9001B; margin-right:5px;"
            >●</span>
            <span style="font-family:'Helvetica', sans-serif;color:#CCCCCC;"></span>
            <span
              v-if="device.state==0"
              style="font-family:'PingFangSC-Regular', 'PingFang SC', sans-serif;color:#FFFFFF;"
            >正常</span>
            <span
              v-if="device.state==1"
              style="font-family:'PingFangSC-Regular', 'PingFang SC', sans-serif;color:#FF0000;"
            >异常</span>
          </p>
          <p style="font-size:18px;">
            <span
              style="font-family:'PingFangSC-Regular', 'PingFang SC', sans-serif;color:#FFFFFF;"
            >数据状态：</span>
            <span style="font-family:'Helvetica', sans-serif;color:#D9001B; margin-right:5px;">●</span>
            <span style="font-family:'Helvetica', sans-serif;color:#CCCCCC;"></span>
            <span
              style="font-family:'PingFangSC-Regular', 'PingFang SC', sans-serif;color:#FFFFFF;"
            >异常</span>
          </p>
          <p style="font-size:18px;">
            <span
              style="font-family:'PingFangSC-Regular', 'PingFang SC', sans-serif;color:#FFFFFF;"
            >工单下发状态：未下发</span>
          </p>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import {
  getVillageList,
  getVillageDetails,
  getDeviceList,
  getDeviceDetails,
} from "/js/api.js";
import {
  createMarker,
  refreshVillageMarkers,
  clearVillageMarkerArr,
  markerMap,
  setLocation,
  getNearMarkers,
  getTips,
} from "/js/marker.js";
import { map, deviceLayer } from "/js/map2.js";
import { setMarkerIcon } from "/js/icon.js";
import { relatedMarker, movePopupWindow } from "/js/movePopupWindow.js";
import Msg from "/js/msg.js";

let vue = undefined;

vue = new Vue({
  el: "#mapPartsContainer",
  created() {},
  mounted() {
    this.search();
  },
  data() {
    return {
      mapSearchWindowVisible: false,
      popupWindowVisible: false,
      jcxxTabVisible: true,
      sbztTabVisible: false,
      villageInfoVisible: true,
      keyword: "",
      villageList: [],
      village: {},
      deviceList: [],
      device: {},
    };
  },
  methods: {
    async search() {
      Msg.loading("加载中……");
      this.clearMap();
      clearVillageMarkerArr();
      if (this.keyword) {
        this.mapSearchWindowVisible = true;
      } else {
        this.mapSearchWindowVisible = false;
      }
      this.popupWindowVisible = false;
      let list = await getVillageList(this.keyword);
      this.villageList = list;
      let villageMarkerArr = [];
      for (let item of list) {
        let marker = createMarker(item.lng, item.lat, {
          id: item.id,
          title: item.name,
          name: item.name,
          type: 0,
          state: item.state,
        });
        setMarkerIcon(marker);
        if (!markerMap.has(marker.options.id)) {
          markerMap.set(marker.options.id, marker);
        }
        villageMarkerArr.push(marker);
        marker.addEventListener("click", (e) => {
          let marker = e.sourceTarget;

          let nearMarkers = getNearMarkers(marker);
          if (nearMarkers.length == 1) {
            this.villageDetailsShow(marker.options.id, true);
          } else {
            let tips = getTips(
              nearMarkers,
              "window.mapParts.villageDetailsShow"
            );
            map.openPopup(tips, marker.getLatLng(), {
              className: "tips",
              offset: L.point(0, -20),
            });
          }
        });
      }
      refreshVillageMarkers();
      setLocation(villageMarkerArr);
      Msg.loadingClose();
    },
    async villageDetailsShow(id, panTo = false) {
      this.clearMap();
      this.villageInfoVisible = true;
      this.popupWindowVisible = true;
      this.jcxxTabVisible = true;
      this.sbztTabVisible = false;
      this.village = await getVillageDetails(id);
      let list = await getDeviceList(id);
      this.deviceList = list;
      for (let item of list) {
        let marker = createMarker(item.lng, item.lat, {
          id: item.id,
          title: item.name,
          name: item.name,
          type: item.type,
        });
        setMarkerIcon(marker);
        deviceLayer.addLayer(marker);
        if (!markerMap.has(marker.options.id)) {
          markerMap.set(marker.options.id, marker);
        }
        marker.addEventListener("click", (e) => {
          let marker = e.sourceTarget;

          let nearMarkers = getNearMarkers(marker);
          if (nearMarkers.length == 1) {
            this.deviceDetailsShow(marker.options.id);
            movePopupWindow(map);
          } else {
            let tips = getTips(
              nearMarkers,
              "window.mapParts.deviceDetailsShow"
            );
            map.openPopup(tips, marker.getLatLng(), {
              className: "tips",
              offset: L.point(0, -20),
            });
          }
        });
      }
      if (markerMap.has(id)) {
        let marker = markerMap.get(id);
        this.refreshRelatedMarker(marker);
        movePopupWindow(map);
        if (panTo) map.flyTo(marker.getLatLng(), 17, { duration: 0.15 });
      }
    },
    async deviceDetailsShow(id) {
      this.popupWindowVisible = true;
      this.villageInfoVisible = false;
      this.device = await getDeviceDetails(id);
      if (markerMap.has(id)) {
        let marker = markerMap.get(id);
        this.refreshRelatedMarker(marker);
        movePopupWindow(map);
      }
    },
    closeSearchWindow() {
      this.mapRefresh();
    },
    closePopupWindow() {
      this.popupWindowVisible = false;
      setMarkerIcon(relatedMarker.marker);
    },
    sbztTab() {
      this.jcxxTabVisible = false;
      this.sbztTabVisible = true;
    },
    jcxxTab() {
      this.jcxxTabVisible = true;
      this.sbztTabVisible = false;
    },
    mapZoomIn() {
      map.zoomIn();
    },
    mapZoomOut() {
      map.zoomOut();
    },
    mapRefresh() {
      this.mapSearchWindowVisible = false;
      this.popupWindowVisible = false;
      map.closePopup();
      this.clearMap();
    },
    clearMap() {
      for (let marker of markerMap.values()) {
        setMarkerIcon(marker);
        if (marker.options.type > 0) {
          deviceLayer.removeLayer(marker);
          markerMap.delete(marker.options.id);
        }
      }
    },
    refreshRelatedMarker(newMarker) {
      if (relatedMarker.marker) setMarkerIcon(relatedMarker.marker, false);
      relatedMarker.marker = newMarker;
      setMarkerIcon(relatedMarker.marker, true);
    },
    txtKeyword_KeyPress_Enter(e) {
      this.search();
    },
  },
});

window.mapParts = vue;
</script>

<style scoped>
.clearfix::after {
  content: "";
  display: block;
  clear: both;
}

.scrollbar-style {
  overflow: auto;
  scrollbar-color: #1a4b97 #0c2343;
  scrollbar-width: thin;
}

.scrollbar-style::-webkit-scrollbar {
  background-color: transparent;
  border-radius: 30px;
  width: 6px;
  height: 6px;
}

.scrollbar-style::-webkit-scrollbar-thumb {
  background-color: rgba(255, 255, 255, 0.12);
  border-radius: 30px;
  width: 6px;
  height: 6px;
}

.map-search {
  z-index: 1999;
  width: 280px;
  height: 48px;
  position: absolute;
  top: 49px;
  left: 33px;
  border-radius: 4px;
  background: rgba(11, 138, 255, 0.8);
  backdrop-filter: blur(10px);
}

.map-search input {
  width: 80%;
  height: 100%;
  box-sizing: border-box;
  padding: 0 16px;
  outline: none;
  border: none;
  background-color: transparent;
  color: #fff;
  font-family: Alibaba PuHuiTi;
  font-weight: regular;
  font-size: 16px;
  float: left;
}

.map-search input::-webkit-input-placeholder {
  color: rgba(255, 255, 255, 0.5);
}

.map-search button {
  width: 20%;
  outline: none;
  border: none;
  height: 100%;
  float: right;
  background-color: #0876e1;
  background-image: url(images/search_icon.png);
  background-repeat: no-repeat;
  background-position: 50% 50%;
  background-size: 50%;
  cursor: pointer;
  border-radius: 4px;
}

.map-search button:hover {
  background-color: #0866d1;
}

.map-option {
  z-index: 1999;
  width: 48px;
  position: absolute;
  bottom: 65px;
  right: 10px;
  background: rgba(11, 138, 255, 0.8);
  text-align: center;
  border-radius: 4px;
  backdrop-filter: blur(10px);
}

.map-option span {
  display: block;
  margin: 0 auto;
  padding: 15px 0;
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
  cursor: pointer;
}

.map-option span:last-of-type {
  border-bottom: none;
}

.map-option span:hover {
  background-color: #0876e1;
  border-radius: 4px;
}

.map-window {
  z-index: 1999;
  border-radius: 4px;
  background: linear-gradient(180deg, #00add3 0%, #0b8aff 100%);
  backdrop-filter: blur(10px);
  position: absolute;
  top: 20%;
  left: 18%;
  box-sizing: border-box;
  padding: 16px;
}

.map-window-header {
  color: #ffffffe5;
  font-family: Alibaba PuHuiTi;
  font-weight: medium;
  font-size: 16px;
  letter-spacing: 0px;
}

.close-window {
  height: 20px;
  cursor: pointer;
  float: right;
}

.map-photo {
  border: 1px solid #ffffff;
  width: 288px;
  height: 162px;
  margin-top: 16px;
}

.map-photo img {
  width: 100%;
  height: 100%;
}

.map-window-content {
  margin-top: 16px;
  width: 100%;
}

.map-tabs {
  width: 100%;
  border-radius: 1px;
  overflow: hidden;
}

.map-tabs span {
  width: 50%;
  text-align: center;
  float: left;
  box-sizing: border-box;
  height: 25px;
  line-height: 22px;
  border: 1px solid rgba(255, 255, 255, 0.5);
  font-family: Alibaba PuHuiTi;
  font-weight: regular;
  font-size: 12px;
  color: #fff;
  cursor: pointer;
}

.tabs-click {
  background-color: #005ab3;
  border: 1px solid transparent;
}

.window-tabs {
  width: 100%;
  margin-top: 16px;
}

.jcxx-tabs-text {
  color: #ffffff;
  font-family: Alibaba PuHuiTi;
  font-weight: regular;
  font-size: 12px;
}

.jcxx-tabs-text + .jcxx-tabs-text {
  margin-top: 5px;
}

.sbzt-tabs {
  display: none;
}

.zc-point {
  width: 7px;
  height: 7px;
  display: inline-block;
  vertical-align: middle;
  background-color: lightgreen;
  border-radius: 50%;
  margin-right: 4px;
}

.yc-point {
  width: 7px;
  height: 7px;
  display: inline-block;
  vertical-align: middle;
  background-color: red;
  border-radius: 50%;
  margin-right: 4px;
}

.sbzt-table {
  width: 100%;
  height: 100%;
  text-align: center;
  border-right: 1px solid rgba(255, 255, 255, 0.12);
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}

.sbzt-table th,
.sbzt-table td {
  color: #ffffff;
  font-family: Alibaba PuHuiTi;
  font-weight: regular;
  font-size: 14px;
  line-height: 20px;
  letter-spacing: 0px;
  text-align: center;
  border-left: 1px solid rgba(255, 255, 255, 0.12);
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  height: 30px;
}

.sbzt-table th {
  color: rgba(255, 255, 255, 0.85);
  background-color: #1476d0;
}

.sbzt-tabs {
  height: 163px;
  display: block;
}

.triangle1 {
  display: block;
  width: 0;
  height: 0;
  border: 25px solid transparent;
  border-left-color: #1b3f77;
  border-top-color: #1b3f77;
  position: absolute;
  top: 0;
  left: 0;
}

.triangle2 {
  display: block;
  width: 0;
  height: 0;
  border: 25px solid transparent;
  border-right-color: #1b3f77;
  border-top-color: #1b3f77;
  position: absolute;
  top: 0;
  right: 0;
}

.map-search-window {
  width: 100%;
  position: absolute;
  left: 0;
  top: 58px;
  border-radius: 4px;
  background: linear-gradient(180deg, #0776e1 0%, #0b8aff 100%);
  backdrop-filter: blur(10px);
  box-sizing: border-box;
  padding: 8px 16px 0 16px;
}

/* .map-search-window header{

padding-bottom: 8px;

border-bottom: 1px solid rgba(255,255,255,0.3);
} */

.search-result {
  margin-top: 8px;
  width: 100%;
  height: 450px;
}

.search-result li {
  width: 100%;
  list-style: none;
  border-top: 1px solid rgba(255, 255, 255, 0.3);
  padding: 16px 0;
}

.search-result li::after {
  content: "";
  display: block;
  clear: both;
}

.search-result-message {
  width: 62%;
  float: left;
}

.result-message-title {
  color: #ffffff;
  font-family: Alibaba PuHuiTi;
  font-weight: medium;
  font-size: 14px;
}

.result-title-index {
  background-image: url(images/index_icon.png);
  background-repeat: no-repeat;
  background-size: 100% 100%;
  display: inline-block;
  text-align: center;
  padding: 0 4px;
  margin-right: 4px;
}

.result-message-addr {
  margin-top: 6px;
  color: #ffffff;
  font-family: Alibaba PuHuiTi;
  font-weight: regular;
  font-size: 12px;
  word-wrap: break-word;
  word-break: break-word;
}

.search-result-img {
  width: 35%;
  height: 57px;
  float: right;
  border: 1px solid #ffffff;
  box-sizing: border-box;
}

.search-result-img img {
  width: 100%;
  height: 100%;
}
</style>
